<template>
	<view class="content" :style="'height:'+height">
		<view class="top-bar">
			<view class="top-bar-left" @click="backOne">
				<image src="../../static/img/common/back.png" mode=""></image>
			</view>
			<view class="top-bar-center">
				详情
			</view>
		</view>
		<view class="main">
			<view class="part">
				<view class="row head">
					<view class="shuxing">
						头像
					</view>
					<view class="con" v-if="type===0">
						<ImageCropper :src="tempFilePath" @confirm="confirm" @cancel="cancel"></ImageCropper>

						<image :src="user.avatar" @tap="upload" class="img"></image>
					</view>
					<view class="con" v-else>
						<image :src="user.avatar" class="img"></image>
					</view>
					<view class="more" v-if="type===0">
						<!-- <i class="iconfont icon-arrow-right"></i> -->
						<image src="../../static/img/common/right.png" mode="aspectFill"></image>
					</view>
				</view>
				<view class="row">
					<view class="shuxing">
						签名
					</view>
					<view class="con">
						<Tinput :text.sync="user.explain" v-if="type===0" @change="textchange('explain')"></Tinput>
						<text v-else>{{user.explain}}</text>
					</view>
					<view class="more" v-if="type===0">
						<!-- <i class="iconfont icon-arrow-right"></i> -->
						<image src="../../static/img/common/right.png" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<view class="part">
				<view class="row">
					<view class="shuxing">
						昵称
					</view>
					<view class="con">
						<Tinput :text.sync="user.name" v-if="type===0" @change="textchange('name')"></Tinput>
						<text v-else>{{user.name}}</text>
					</view>
					<view class="more" v-if="type===0">
						<!-- <i class="iconfont icon-arrow-right"></i> -->
						<image src="../../static/img/common/right.png" mode="aspectFill"></image>
					</view>
				</view>
				<view class="row">
					<view class="shuxing">
						性别
					</view>
					<view class="con">
						<picker @change="bindPickerChange" :value="user.sex" :range="array" v-if="type==0">
							<view class="uni-input">{{array[user.sex]}}</view>
						</picker>
						<text v-else>{{array[user.sex]}}</text>
					</view>
					<view class="more" v-if="type ===0">
						<!-- <i class="iconfont icon-arrow-right"></i> -->
						<image src="../../static/img/common/right.png" mode="aspectFill"></image>
					</view>
				</view>
				<view class="row">
					<view class="shuxing">
						生日
					</view>
					<view class="con">
						<picker mode="date" :value="user.brith" start="startDate" :end="endDate"
							@change="bindDateChange" v-if="type===0">
							<view class="uni-input">{{user.brith}}</view>
						</picker>
						<text v-else>{{user.brith}}</text>
					</view>
					<view class="more" v-if="type===0">
						<!-- <i class="iconfont icon-arrow-right"></i> -->
						<image src="../../static/img/common/right.png" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<view class="part">
				<view class="row" @tap="open('邮箱')">
					<view class="shuxing">
						邮箱
					</view>
					<view class="con">
						{{user.email}}
					</view>
					<view class="more" v-if="type===0">
						<!-- <i class="iconfont icon-arrow-right"></i> -->
						<image src="../../static/img/common/right.png" mode="aspectFill"></image>
					</view>
				</view>
				<view class="row" v-if="type===0" @tap="open('密码')">
					<view class="shuxing">
						密码
					</view>
					<view class="con">
						*******
					</view>
					<view class="more">
						<!-- <i class="iconfont icon-arrow-right"></i> -->
						<image src="../../static/img/common/right.png" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<view class="btn" v-if="type===0">
				退出登录
			</view>
		</view>
		<!-- 修改框 -->
		<view class="midify" :animation="animationData">
			<view class="midify-header">
				<view class="close" @tap="close">
					取消
				</view>
				<view class="title">
					修改{{title}}
				</view>
				<view class="define" @tap="midify(title)">
					确定
				</view>
			</view>
			<view class="midify-main">
				<input type="text" v-model="pwd" class="midify-content" placeholder="请输入当前的密码" />
				<textarea class="midify-content" v-model="data" :placeholder="'请输入新的'+title"></textarea>
			</view>
		</view>
	</view>
</template>

<script>
	import ImageCropper from '@/components/ling-imgcropper/ling-imgcropper.vue'
	import Tinput from '@/components/Tinput/Tinput.vue'
	import animation from '@/common/js/animation.js'
	import {
		mapState
	} from 'vuex'
	import {
		from
	} from 'form-data'
	export default {
		data() {
			return {
				UserProfile: {},
				array: ['男', '女', '不告诉你'],
				date: '',
				cropFilePath: '',
				tempFilePath: "",
				type: 0,
				data: '',
				pwd: '',
				title: '密码',
				animationData: '',
				height: '100%',
				user: {},
				a: ''
			};
		},
		components: {
			ImageCropper: ImageCropper,
			Tinput
		},
		methods: {
			backOne() {
				uni.navigateBack()
			},
			bindPickerChange: function(e) {
				console.log(e.detail.value);
				this.edit({
					sex: e.detail.value
				})
			},
			bindDateChange: function(e) {
				this.edit({
					brith: e.detail.value
				})
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			upload() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album", "camera"], //从相册选择
					success: (res) => {
						this.tempFilePath = res.tempFilePaths.shift();
					},
				});
			},
			confirm(e) {
				this.tempFilePath = "";
				this.cropFilePath = e.detail.tempFilePath;
				uni.uploadFile({
					url: "http://localhost:3000/files/upload",
					filePath: this.cropFilePath,
					name: "file",
					fileType: "image",
					formData: {
						id: this.id
					},
					success: (uploadFileRes) => {
						this.cropFilePath = uploadFileRes.data
						this.edit({
							avatar: this.cropFilePath
						})
						//自定义操作
					},
					fail(e) {
						console.log("this is errormes " + e.message);
					},
				});
			},
			async edit(obj) {
				await this.request({
					url: '/user/update',
					method: "PUT",
					data: {
						id: this.id,
						obj: obj
					}
				})
				this.getUser(this.id)
			},
			cancel() {
				console.log("canceled");
				this.tempFilePath = "";
			},
			// 弹出动画
			open(t) {
				this.title = t
				if (this.type !== 0) return
				this.height = '100vh'
				animation(a => {
					a.top(0).step()
					this.animationData = a.export()
				})
			},
			//关闭动画
			close() {
				this.pwd = ''
				this.data = ''
				this.height = '100%'
				animation(a => {
					a.top('100%').step()
					this.animationData = a.export()
				})
			},
			//确定修改
			async midify() {
				if (this.pwd == '' || this.data == '') {
					return uni.showToast({
						icon: "error",
						title: "旧密码或邮箱不能为空"
					})
				}

				if (this.title == '密码') {
					var reg1 = /[\u4e00-\u9fa5]/
					if (reg1.test(this.data)) {
						return uni.showToast({
							icon: "error",
							title: "密码不能包括中文"
						})
					}
					var {
						data
					} = await this.request({
						url: '/user/pwd',
						method: "PUT",
						data: {
							id: this.id,
							opwd: this.pwd,
							npwd: this.data,
						}
					})
					if (data.status === 400) {
						setTimeout(() => {
							uni.showToast({
								icon: 'error',
								title: data.msg
							})
						}, 1600)
					} else {
						setTimeout(() => {
							uni.showToast({
								icon: 'success',
								title: '修改成功,请重新登录',
								success() {
									setTimeout(() => {
										uni.reLaunch({
											url: '/pages/signin/signin'
										})
									},1500)

								}
							})
						}, 1600)
					}
				} else {
					var reg2 = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
					if (!reg2.test(this.data)) {
						return uni.showToast({
							icon: "error",
							title: "请输入正确的邮箱地址"
						})
					}
					var {
						data
					} = await this.request({
						url: '/user/email',
						method: "PUT",
						data: {
							id: this.id,
							pwd: this.pwd,
							email: this.data,
						}
					})
					if (data.status === 400) {
						setTimeout(() => {
							uni.showToast({
								icon: 'error',
								title: data.msg
							})
						}, 1600)
					}else{
						this.getUser(this.id)
					} 
				}
				this.close()
			},
			async getUser(id) {
				var {
					data
				} = await this.request({
					url: '/user',
					data: {
						id: id
					}
				})
				this.user = data.data
				if (!this.user.explain) {
					this.user.explain = ""
				}
				if (!this.user.brith) {
					this.user.brith = '2000-01-01'
				}
			},
			textchange(e) {
				if (e == 'name') {
					this.edit({
						name: this.user.name
					})
				} else {
					this.edit({
						explain: this.user.explain
					})
				}
			}
		},
		computed: {
			//计算当前事件
			startDate() {
				return this.getDate('start');
			},
			// 获取60年前事件
			endDate() {
				return this.getDate('end');
			},
			...mapState(['id'])
		},
		onLoad(e) {
			if (e.id == this.id) {
				this.type = 0
			} else {
				this.type = 1
			}
			this.getUser(e.id)
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../common/css/base.scss";

	.content {
		position: relative;
		box-sizing: border-box;
		overflow: hidden;
	}

	.top-bar {
		@include top-bar(#FFF);
		z-index: 999;

		.top-bar-left {
			padding: 0;
			padding-top: 20rpx;
			box-sizing: border-box;

			image {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.top-bar-center {
			margin-right: 336rpx-32rpx;
		}

	}

	.main {
		padding-top: 88rpx+30rpx;

		.part {
			margin-top: 12rpx;
			box-shadow: 0px 1px 0px 0px rgba(238, 238, 238, 1);

			.row {
				display: flex;
				padding: 0 26rpx 0 32rpx;
				height: 124rpx;
				font-size: 32rpx;

				.shuxing {
					text-align: center;
					line-height: 124rpx;
					width: 62rpx+32rpx;

					color: #272832;
					font-weight: 400;
					// margin-right: 32rpx;
				}

				.con {
					flex: 1;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					// line-height: 124rpx;
					padding: 46rpx 32rpx;

					.img {
						width: 108rpx;
						height: 108rpx;
						border-radius: 20rpx;
					}
				}

				.more {
					text-align: center;
					line-height: 124rpx;

					image {
						vertical-align: center;
						width: 28rpx;
						height: 28rpx;
					}
				}
			}

			.head {
				height: 148rpx;

				.shuxing,
				.more {
					line-height: 148rpx;
				}

				.con {
					padding: 20rpx;
				}
			}
		}

		.btn {
			text-align: center;
			line-height: 80rpx;
			width: 684rpx;
			height: 80rpx;
			margin: 160rpx 32rpx 8rpx 34rpx;
			font-size: 32rpx;
			color: #FF5D5B;
			font-weight: 400;
		}
	}

	.midify {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 999;
		background-color: #fff;
		height: 100%;

		.midify-header {
			display: flex;
			padding: var(--status-bar-height) 32rpx 0;
			width: 750rpx-32rpx-32rpx;
			height: 88rpx;
			background: #FFFFFF;
			box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);
			justify-content: space-between;
			align-items: center;
			font-size: 32rpx;
			font-weight: 400;

			.title {
				font-size: 40rpx
			}

			.define {
				color: #4AAAFF;
			}

		}

		.midify-main {
			.midify-content {
				margin: 34rpx auto;
				padding: 22rpx 16rpx;
				box-sizing: border-box;
				width: 686rpx;
				height: 100rpx;
				// height: 386rpx;
				background: #F3F4F6;
				border-radius: 20rpx;
				font-size: 32rpx;
				line-height: 56rpx;
				color: #272832;
				font-weight: 400;
			}
		}
	}
</style>
